import render from './custom/previewRender.vue';
import checkRules from './custom/rule';

const layouts = {
  colItem(element, parentPath = '') {
    // 普通组件处理
    const labelWidth = element.labelWidth ? `${element.labelWidth}px` : null;
    const rules = checkRules(element);
    const { onValChange } = this.$attrs;
    // 处理行组件嵌套
    if (element.compType === 'row') {
      const currentPath = parentPath ? `${parentPath}.${element.id}` : element.id;
      return (
        <el-col 
          span={24}
          style="padding-left: 7.5px; padding-right: 7.5px;"
          class="nested-row-container"
        >
          <el-row gutter={element.gutter}>
            {element.columns?.map((column, colIndex) => (
              <el-col
                key={`col-${colIndex}`}
                {...(column.responsive !== false ? {
                  xs: column.xs || 24,
                  sm: column.sm || column.span || 12,
                  md: column.md || column.span || 8,
                  lg: column.lg || column.span || 6,
                  xl: column.xl || column.span || 4
                } : {
                  span: column.span || 12
                })}
              >
                {column.list?.map((child) => (
                  <preview-item
                    key={child.id}
                    model={child}
                    modelValue={child.modelValue}
                     onInput={(event) => {
                      element.modelValue = event;
                      this.$emit('valChange',child.id, event)
                    }}
                  />
                ))}
              </el-col>
            ))}
          </el-row>
        </el-col>
      );
    }

    return (
      <el-col 
        style="padding-left: 7.5px; padding-right: 7.5px;"
        {...(element.responsive !== false ? {
          xs: element.xs || 24,
          sm: element.sm || element.span || 12,
          md: element.md || element.span || 8,
          lg: element.lg || element.span || 6,
          xl: element.xl || element.span || 4
        } : {
          span: element.span || 24
        })}
      >
        <el-form-item
          label={element.showLabel ? element.label : ''}
          // label-width={labelWidth}
          prop={element.id}
          rules={rules}
        >
          <render
            key={element.id}
            conf={element}
            modelValue={element.modelValue}
            onInput={(event) => {
              element.modelValue = event;
              this.$emit('valChange',element.id, event)
            }}
          />
        </el-form-item>
      </el-col>
    );
  }
};

export default {
  name: 'previewItem',
  components: {
    render
  },
   props: ['model', 'modelValue'],
  emits: ['valChange'], // 明确声明事件
  data() {
    return {
      eleConfig: this.model
    };
  },
  render() {
    this.eleConfig.modelValue = this.modelValue;
    return layouts.colItem.call(this, this.eleConfig, this.modelValue);
  }
};